import styles from './index.less';
import { useState, useEffect } from 'react';
import { Modal, Button, Spin } from 'antd';
import { useIntl, useModel } from 'umi';
import request from '@/utils/request';

const QrcodeModalComponent = () => {
  const intl = useIntl();
  const { authenticated, setAuthenticated, qrCode, setQrCode } = useModel(
    'hook',
  );

  useEffect(() => {
    // onReFresh()
  }, []);

  const onReFresh = () => {
    request.get('/user/status').then((res) => {
      const { authenticated, qrCode } = res.data;
      setAuthenticated(authenticated);
      setQrCode(qrCode);
    });
  };

  const onScanne = () => {
    setAuthenticated('Y');
  };

  const onClose = () => {
    setAuthenticated(authenticated + '1');
  };

  console.log('authenticated', authenticated);

  return (
    <Modal
      title=""
      visible={authenticated === 'N'}
      width="900px"
      footer={null}
      className="qrcodeModal"
      onCancel={onClose}
    >
      <div className={styles.header}>
        {/* <img src="" alt=""/> */}
        <div className={styles.info}>
          <div className={styles.title}>WhatasApp</div>
          <div className={styles.explain}>
            {intl.formatMessage({ id: 'qrcodeliexplain' })}
          </div>
        </div>
      </div>
      <div className={styles.content}>
        <div className={styles.left}>
          <h3 className={styles.h3}>
            {intl.formatMessage({ id: 'description' })}
          </h3>
          <div className={styles.ul}>
            <div className={styles.li}>
              1.{intl.formatMessage({ id: 'qrcodeli1' })}
            </div>
            <div className={styles.li}>
              2.{intl.formatMessage({ id: 'qrcodeli2' })}
            </div>
            <div className={styles.li}>
              3.{intl.formatMessage({ id: 'qrcodeli3' })}
            </div>
            <div className={styles.li}>
              4.{intl.formatMessage({ id: 'qrcodeli4' })}
            </div>
          </div>
        </div>
        <div className={styles.right}>
          <div className={styles.qrcodecon}>
            {qrCode ? <img className={styles.qrcode} src={qrCode} alt="" /> : null}
            <Spin />
          </div>
          <div className={styles.btns}>
            <Button
              type="primary"
              block
              onClick={onReFresh}
              style={{ marginRight: 20 }}
            >
              {intl.formatMessage({ id: 'refresh' })}
            </Button>
            <Button
              type="primary"
              block
              onClick={onReFresh}
              style={{ marginRight: 20 }}
            >
              {intl.formatMessage({ id: 'qrcodesubmit' })}
            </Button>
            <Button block onClick={onClose}>
              {intl.formatMessage({ id: 'qrcodecancel' })}
            </Button>
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default QrcodeModalComponent;
